<template>
  <el-tabs v-model="activeName" :class="mode==='tag'?'tag-container':'detail-tabs-container'" type="card" @tab-click="handleClick">
    <el-tab-pane v-for="(item, tabIndex) in tabs" :key="item.id" :label="item[labelName]" :name="getName(item.id)">
      <div slot="label" class="tab-name">{{ item[labelName] || placeholder }}<i v-if="editable" class="el-icon-close" @click="deleteItem(tabIndex)"/>
        <div v-if="item.dotColor" :style="{backgroundColor: item.dotColor}" class="dot" />
        <InfoIcon v-if="item.tooltip" :content="item.tooltip" style="width: 16px;height: 16px;margin-left: 4px;" />
        <div v-if="showBadge(item)" class="item-badge">{{ badge(item) }}</div>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  name: 'DetailTabs',
  model: {
    prop: 'curIndex',
    event: 'changeValue'
  },
  props: {
    curIndex: {
      type: Number | String,
      default: 1
    },
    labelName: {
      type: String,
      default: 'name'
    },
    placeholder: {
      type: String,
      default: ''
    },
    showZero: {
      type: Boolean,
      default: false
    },
    editable: {
      type: Boolean,
      default: false
    },
    tabs: {
      type: Array,
      default: () => []
    },
    mode: {
      type: String,
      default: ''
    },
    /** maxBadge:
     * num: 最大值
     * str: 大于等于最大值时显示这个文案
     * unit: 大于最大值时在文案后面增加这个单位
     */
    maxBadge: {
      type: Object,
      default() {
        return {
          num: 10000,
          str: '1w',
          unit: '+'
        };
      }
    }
  },
  data() {
    return {
      dataType: 'number'
    };
  },
  computed: {
    activeName: {
      get() {
        if (this.dataType === 'number') {
          return this.curIndex.toString();
        } else {
          return this.curIndex;
        }
      },
      set(id) {
        if (this.dataType === 'number') {
          this.$emit('changeValue', Number(id));
        } else {
          this.$emit('changeValue', String(id));
        }
      }
    }
  },
  created() {
    this.dataType = typeof this.curIndex;
  },
  methods: {
    handleClick() {
      this.$nextTick(() => {
        if (this.dataType === 'number') {
          this.$emit('tabClick', Number(this.curIndex));
        } else {
          this.$emit('tabClick', String(this.curIndex));
        }
      });
    },
    getName(name) {
      return String(name);
    },
    badge(item) {
      const maxBadge = this.maxBadge;
      let str = item.num >= maxBadge.num ? maxBadge.str : item.num;
      if (item.num > maxBadge.num && maxBadge.unit) {
        str += maxBadge.unit;
      }
      return str;
    },
    showBadge(item) {
      return item.showBadge || (this.showZero && (item.num || item.num === 0)) || (!this.showZero && item.num && item.num > 0);
    },
    deleteItem(id) {
      this.$emit('deleteItem', id);
    }
  }
};
</script>

<style lang="scss" scoped>
.tab-name {
  display: flex;
  height: 100%;
  align-items: center;
}
.dot {
  width: 6px;
  height: 6px;
  margin-left: 2px;
  border-radius: 100%;
  position: absolute;
  right: 5px;
  top: 3px;
}
.detail-tabs-container {
  &::v-deep {
    .el-tabs__header  {
      margin-bottom: 0 !important;
      border-bottom: 1px solid #ddd;
      .el-tabs__nav {
        border: none !important;
      }
      .el-tabs__item {
        padding: 0 12px !important;
        height: 32px !important;
        line-height: 32px !important;
        margin-right: 8px;
        border: 1px solid #ddd;
        border-radius: 4px 4px 0px 0px;
        color: #333;
        background: #f7f8fa;
        font-size: 16px;
        &:last-child {
          margin-right: 0px;
        }
        &.is-active {
          border-bottom-color: #FFFFFF !important;
          font-weight: bold;
          background: #fff;
          color: #406eff;
        }
      }
    }
  }
}
.tag-container {
  &::v-deep {
     .el-tabs__header {
      border: none;
      margin-bottom: 10px;
      .el-tabs__nav {
        border: none;
      }
     }
    .el-tabs__item {
      border: 1px solid #f5f5f5 !important;
      background: #f5f5f5 !important;
      margin-right: 8px !important;
      border-radius: 4px !important;
      font-size:14px !important;
      font-weight:400 !important;
      color:#192452 !important;
      height: 28px !important;
      line-height: 28px !important;
      padding: 0 8px !important;
    }
    .el-tabs__header .el-tabs__item.is-active {
      border-color: #406EFF !important;
      background: #EFF3FF !important;
      color: #406EFF !important;
      font-weight: bold !important;
      &.is-focus {
        box-shadow: none;
      }
    }
  }
}
.item-badge {
  position: absolute;
  right: 0;
  top: 0;
  padding: 0 6px;
  height: 17px;
  min-width: 18px;
  line-height: 18px;
  text-align: center;
  border-radius: 10px;
  background-color: #FB5227;
  font-size: 12px;
  display: inline-block;
  color: #fff;
  transform: scale(0.8);
  margin-left: 4px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
}
.el-icon-close {
  font-size: 14px !important;
  color: #666666;
  margin-left: 8px;
  width: 14px !important;
  top: 0 !important;
  right: 0 !important;
  background-color:transparent !important;
}
</style>
